<div class="page-toolbar">
        <div class="page-filter fl">
            <form class="layui-form layui-form-pane" action="{:url()}" method="get" id="hisi-table-search">
            <div class="layui-form-item">
                <label class="layui-form-label">搜索</label>
                <div class="layui-input-inline">
                    <input type="text" name="keyword" lay-verify="required" placeholder="输入关键词，按回车搜索" class="layui-input">
                </div>
            </div>
            </form>
        </div>
    </div>

    <table id="dataTable"></table>
    
    {include file="system@block/layui" /}
    <script type="text/html" title="操作按钮模板" id="buttonTpl">
            <a href="{:url('edit')}?id={{ d.id }}" class="layui-btn layui-btn-xs layui-btn-normal hisi-iframe" title="修改" hisi-data="{width: '450px', height: '350px'}">修改</a><a href="{:url('del')}?id={{ d.id }}" class="layui-btn layui-btn-xs layui-btn-danger hisi-tr-del">删除</a>
    </script>
    <script type="text/html" id="toolbar">
        <div class="layui-btn-group fl">
            <a href="{:url('add')}" hisi-data="{width: '450px', height: '350px'}" class="layui-btn layui-btn-primary layui-btn-sm layui-icon layui-icon-add-circle-fine hisi-iframe" title="添加">&nbsp;添加</a>
            <a data-href="{:url('del')}" class="layui-btn layui-btn-primary layui-btn-sm j-page-btns confirm layui-icon layui-icon-close red">&nbsp;删除</a>
        </div>
    </script>
    <script type="text/html" id="updateTimeTpl">
        <div>{{layui.util.toDateString(d.update_time * 1000) }}</div>
    </script>
    <script type="text/javascript">
        layui.use(['table','tool'], function() {
            var table = layui.table;
            table.render({
                elem: '#dataTable'
                ,url: '{:url()}' //数据接口
                ,page: true //开启分页
                ,skin: 'row'
                ,even: true
                ,limit: 20
                ,text: {
                    none : '暂无相关数据'
                }
                ,toolbar: '#toolbar'
                ,defaultToolbar: ['filter', 'exports', 'print']//
                ,cols: [[ //表头
                    {type:'checkbox'}
                    ,{field: 'name', title: '关键字'}
                    ,{field: 'type', title: '类型',templet:function(d){return tags(d.type)}}
                    ,{field: 'update_time', title: '更新时间',templet: '#updateTimeTpl', width:150}
                    ,{title: '操作', width: 220, templet: '#buttonTpl'}
                ]]
            });
            function tags(val){
                if (val == 'fabric') return '<span class="layui-badge layui-bg-green">面料</span>';
                else if (val == 'lining') return '<span class="layui-badge layui-bg-orange">里料</span>';
                else if (val == 'accessories') return '<span class="layui-badge layui-bg-blue">辅料</span>';
            }
        });
    </script>